


import React from "react"
import ReactDOM  from "react-dom"
import MainCpt from "./layout"

// JSX 
class FirstCpt extends React.Component{
    render(){
        return (
            <div>
                <h2>这是第一个 React 组件</h2>
                <Demo/>
                <App/>
            </div>
        )
    }
}

class Demo extends React.Component{
    render(){
        return (
            <div>
                <h2>Demo - Demo - Demo </h2>
            </div>
        )
    }
}

// class 类组件
class App extends React.Component{
    render(){
        return (
            <div>
                App - APp - app 
                <Find/>
                <Mine/>
            </div>
        )
    }
}

// 纯函数组件
function Find(){
    return (
        <div>
            <h2>Find - FInd - FInd </h2>
        </div>
    )
}

const Mine = ()=>(<div><h2>MIne - Mine-  个人中心</h2></div>)

    ReactDOM.render(
        <MainCpt/>,
        document.getElementById("app")
    )



// import {Provider } from 'mobx-react'
// import {store} from '../mobx/store'
// ReactDOM.render(
//     <Provider {...store}  >     
//          <MainCpt/>
//     </Provider>
//    ,
//     document.getElementById("app")
// )

// import store from '../reduxdemo/store'
// import {Provider} from 'react-redux'
// import store from './../reactRedux/store';
// // 渲染组件
// ReactDOM.render(
//     <Provider store={ store }>
//           <MainCpt/>
//     </Provider>,
//     document.getElementById("app")
// )

// ReactDOM.render(根组件,根节点)  把根组件渲染到根节点 


// 每当state 改变 store 就会重新执行这个函数 重新渲染视图 
// store.subscribe(()=>{
//     ReactDOM.render(
//         <MainCpt/>,
//         document.getElementById("app")
//     )
// })